import React, { Component } from 'react';
import { Timeline, Row, Col, Card } from 'antd';

import './logistics.scss'
const TimelineItem = Timeline.Item

class LogiProcess extends Component {
  state = {
    // test: "666"
  }

  render() {
    const { data } = this.props;
    const routers = data.fullTraceDetail
    return (
      <React.Fragment>
        <div className="logiProcess scrollbar">
          {data.noSupport ? <Card.Grid style={{ width: '100%', textAlign: 'center' }}>{data.noSupport}</Card.Grid> : <Timeline mode="alternate">
            {routers && routers.map((item, index) => {
              return (
                <TimelineItem key={index}>
                  <Row><Col>{item.desc}</Col><Col>{item.time}</Col></Row>
                </TimelineItem>
              )
            })}
          </Timeline>}
        </div>
      </React.Fragment>
    );
  }
}

export default LogiProcess;
